<template>
	<view v-if="showMask" class="mask-layer">
		<view class="address">
			<view class="address-title">添加收货地址</view>
			<view class="close" @click.stop="hideMask">×</view>
			<view class="lianxi">
				<view class="name">
					<input placeholder="收货姓名" rows="8" cols="18" v-model="name" type="text" />
				</view>
				<view class="phone">
					<input placeholder="联系电话" rows="8" cols="18" v-model="phone" type="text" />
				</view>
			</view>
			<view class="area">
				<view class="area-left">所在地区</view>
				<view class="area-right" @click='show=true'>
					<image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png" mode=""></image>
				</view>
			</view>
			<view class="dingwei">
				<view class="dingwei-left">
					<textarea placeholder="详细地址" rows="8" cols="18" v-model="xiangxi" type="text" />
				</view>
				<view class="dingwei-right">
					<!-- <image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png"  mode=""></image> -->
				</view>
			</view>
			<button @click='handlesave()'>保存</button>
		</view>
	</view>
	<!-- 内容 -->
	<view class="box">
		<text class="wenzi">请在</text>
		<!-- <text class="djs">{{ countdown }}秒</text> -->
		<text class="wenzi">内填写补充订单信息并支付成功！</text>
	</view>
	<view class="box1" v-if="obj.name==''?false:true">
		 {{obj.name}},{{obj.phone}},{{obj.xiangxi}}
	</view>
	<view v-else>
		<view class="main">
			<view class="main-left">
				<image :src="imgUrl + '/statics/js/modules/applet/img/add.png'" mode="" class="add"></image>
				<view class="shoudong">手动添加收货地址</view>
			</view>
			<view class="main-right" @click="toggleMask">
				<image src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png" mode=""></image>
			</view>
		</view>
	</view>
	<view class="box2"></view>
	<!-- 中间部分 -->
	<view class="middle">
		<view class="product">
			<view class="middle-left">
				<image :src="productId.banarImg" mode=""></image>
			</view>
			<view class="middle-right">
				<view class="title">{{productId.tradeName}}</view>
				<view class="price">
					<text>¥</text>
					<text>{{productId.activityProPrice}}</text>
					<text>×{{change}}</text>
				</view>
				<view class="shengyu">
					<image :src="imgUrl +'/statics/js/modules/applet/img/dsj.png'" mode=""></image>
					<text>仅剩</text>
					<text>{{productId.remainNum}}</text>
					<text>件</text>
				</view>
			</view>
		</view>
		<view class="shuliang">
			<view class="goumai">购买数量</view>
			<view class="goumai-right">
				<uni-number-box  @change="NumberBox" v-model="change" ></uni-number-box>
			</view>
		</view>
		<view class="yunfei">
			<view class="yunfei-left">订单运费</view>
			<view class="yunfei-right">包邮</view>
		</view>
		<view class="liuyan">
			<view class="liuyan-left">订单留言</view>
			<view class="liuyan-right">
				<input class="uni-input"/>
			</view>
		</view>
	</view>
	<view class="box2"></view>
	<view class="middle2">
		<view class="pay">支付方式</view>
		<view class="vxpay">
			<view class="main-left">
				<image :src="imgUrl +'/statics/js/modules/applet/img/vxpay.png'" mode="" class="zhifu"></image>
				<view class="shoudong">微信支付</view>
			</view>
			<view class="vxpay-right">
				<image :src="imgUrl +'/statics/js/modules/applet/img/chgong.png'" mode=""></image>
			</view>
		</view>
	</view>
	<view class="box3"></view>
	<!-- 底部支付 -->
	<view class="foot">
		<view class="foot-left">
			<text>¥</text>
			{{hesuan}}
		</view>
		<view class="foot-right" @click="handlepay">立即支付</view>
	</view>
</template>
<script>
	import banner from '@/api/banner.js';
	import commonApi from '@/utils/commonMethod.js';
	import indexApi from '@/utils/request/index.js';
	export default {
		data() {
			return {
				change:1,
				openid:"",
				show: false,
				province: "山东省",
				city: '',
				area: '',
				obj: {
					province: "",
					name: "",
					phone: "",
					realaddress:"",
					xiangxi: ""
				},
				input: '',
				productId: null,
				value: 0,
				countdown: 60, // 倒计时秒数
				isPaying: false, // 支付状态，防止重复点击
				showMask: false,
				name: '',
				phone: '',
				imgUrl: indexApi.baseUrl,
				activitprosave: [],
			};
		},
		async onLoad(options) {
			this.productId = JSON.parse(options.productId);
			this.hesuan = this.productId.activityProPrice
			console.log(this.productId, 2222)
			this.productId.banarImg = this.productId.banarImg.split(',')[0];
		},
		mounted() {
		},
		
		methods: {
			async handlepay() {
				const aobj = {
					phone: this.phone,
					userld:uni.getStorageSync( 'userId'),
					userName: this.name,
					productId: this.productId.id,
					productQuantity: "1",
					deliveryAddress:  this.xiangxi,
				}
				let openid = "";
				let that = this;
				const currentPromise = await commonApi.currentUserAxios()
				that.currentUser = currentPromise.data.session_user_h5
				 uni.login({
				   provider: 'weixin', //使用微信登录获取code
				   success: function (loginRes) {
				     console.log(that.currentUser)
				     //使用微信code获取openid
				     commonApi.getOpenId(loginRes.code).then(res => {
				         that.openid = res.data.openid;
						 console.log(res.data.openid,that.openid,123123123);
				       let userInfo = {
				         id: that.currentUser.id,
				         openId: that.openid
				       }
					   banner.activitprosave(aobj).then(res => {
						console.log(that.openid,222222222222);
					   	const aobj1 = {
					   		id: res.data.nocOrder.id,
					   		orderNum: res.data.nocOrder.orderNum,
					   		payAmount: res.data.nocOrder.payAmount,
					   		tradeType:'JSAPI',
							openid: that.openid
					   	}
	
				       banner.OrderForActivity(aobj1).then(data => {
						   console.log(data,1111111)
				         //调起微信支付
				         uni.requestPayment({
				           provider: 'wxpay',
				           timeStamp: data.data.payMap.timeStamp,// 时间戳（单位：秒）
				           nonceStr: data.data.payMap.nonceStr,// 随机字符串
				           package: data.data.payMap.package,// 统一下单接口返回的 prepay_id 参数值
				           signType: data.data.payMap.signType,// 签名算法，应与后台下单时的值一致
				           paySign: data.data.payMap.paySign,// 签名
				           success(data){
				             //支付成功
				             // 跳转到我的页面
				             uni.switchTab({
				               url:'/pages/tabBar/personal/personal'
				             })
				           },
				           fail(err) {
				             //支付失败、用户取消支付
				           }
				         });
				       })
				     });
					 })
				   }
				 });
			},
			onsetCity() {
				this.obj.province = this.province
				this.obj.realaddress = this.city
				this.obj.xiangxi = this.xiangxi
				this.show = false
			},
			handlesave() {
				this.obj.name = this.name
				this.obj.phone = this.phone
				this.obj.xiangxi = this.xiangxi
				this.showMask = false
			},
			input() {
				return
			},
			NumberBox() {
				this.hesuan = this.productId.activityProPrice * this.change
			},
			toggleMask() {
				this.showMask = !this.showMask;
			},
			// 隐藏灰色透明页面
			hideMask() {
				this.showMask = false;
			},
			
			// startCountdown() {
			//   let timer = setInterval(() => {
			//     if (this.countdown > 0) {
			//       this.countdown--;
			//     } else {
			//       clearInterval(timer);
			//       this.isPaying = true; // 倒计时结束，设置支付状态为进行中
			//       this.handlePayTimeout(); // 处理支付超时逻辑
			//     }
			//   }, 1000);
			// },
			// handlePay() {
			//   if (this.countdown > 0) {
			//     this.isPaying = true; // 开始支付，设置支付状态为进行中
			//     // 调用后端支付接口
			//     this.makePayment().then(() => {
			//       this.isPaying = false; // 支付成功，重置支付状态
			//       uni.showToast({
			//         title: '支付成功',
			//         icon: 'success'
			//       });
			//       // 跳转到支付成功页面或其他逻辑处理
			//     }).catch(() => {
			//       this.isPaying = false; // 支付失败，重置支付状态
			//       uni.showToast({
			//         title: '支付失败',
			//         icon: 'none'
			//       });
			//       // 跳转到支付失败页面或其他逻辑处理
			//     });
			//   }
			// },
			// handlePayTimeout() {
			//   // 处理支付超时逻辑，例如重新倒计时或提示用户支付超时
			//   uni.showToast({
			//     title: '支付超时，请重新下单',
			//     icon: 'none'
			//   });
			//   // 重置倒计时和支付状态，以便用户重新操作
			//   this.countdown = 60;
			//   this.isPaying = false;
			//   this.startCountdown();
			// },
			// makePayment() {
			//   // 这里是模拟支付请求的异步操作，你需要替换成实际的支付接口调用
			//   return new Promise((resolve, reject) => {
			//     setTimeout(() => {
			//       // 假设支付成功
			//       resolve();
			//     }, 2000);
			//   });
			// }
		}
	};
</script>

<style scoped>
	.mask-layer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}
	.box {
		height: 74rpx;
		line-height: 74rpx;
		background: #FFF5DA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		text-align: center;
	}
	.wenzi {
		width: 330rpx;
		height: 32rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #F1AD33;
		line-height: 34rpx;
	}
	.djs {
		width: 40rpx;
		height: 42rpx;
		background: #343235;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		opacity: 1;
		color: white;
	}
	.main {
		height: 92rpx;
		border-bottom: 2px solid #F7F7F7;
		display: flex;
	}
	.main-left {
		display: flex;
		width: 660rpx;
		height: 92rpx;
		line-height: 92rpx;
	}

	.main-right image {
		width: 20rpx;
		height: 20rpx;
		margin: 20px auto;
	}

	.add {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10px;
		margin-top: 11px;
	}

	.shoudong {
		width: 240rpx;
		height: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #2E2D2D;
		margin-left: 12px;
	}
	.box1{
		margin-left: 20px;
		line-height: 50px;
		height: 50px;
		font-size: 28rpx;
	}

	.box2 {
		width: 750rpx;
		height: 8px;
		background-color: #F7F7F7;
	}

	.middle {
		width: 750rpx;
		height: 570rpx;

	}

	.middle2 {
		width: 752rpx;
		height: 150rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
	}

	.middle-left image {
		width: 220rpx;
		height: 200rpx;
		margin-top: 20px;
		margin-left: 20px;
	}

	.middle-right {
		font-size: 14px;
		margin-top: 20px;
		margin-left: 15px;
	}

	.product {
		display: flex;
		height: 115px;
	}

	.title {
		margin-top: 5px;
	}

	.price {
		font-size: 16px;
		margin-top: 15px;
	}

	.shengyu image {
		width: 26rpx;
		height: 26rpx;
		margin-top: 15px;
	}

	.shengyu text {
		color: red;
	}

	.shuliang {
		width: 800rpx;
		height: 40px;
		margin-top: 20px;
		display: flex;
		justify-items: end;
	}

	.goumai {
		font-size: 14px;
		margin: 10px auto;
		width: 300rpx;
	}

	.goumai-right {
		margin: 10px auto;
	}

	.yunfei {
		width: 800rpx;
		height: 40px;
		display: flex;
		justify-items: end;
	}

	.yunfei-left {
		font-size: 14px;
		margin: 10px auto;
		width: 450rpx;
	}

	.yunfei-right {
		font-size: 14px;
		margin: 10px auto;
	}

	.liuyan {
		width: 800rpx;
		height: 40px;
		display: flex;
		justify-items: end;
	}

	.liuyan-left {
		font-size: 14px;
		margin: 10px auto;
		width: 187rpx;
	}

	.liuyan-right {
		width: 326rpx;
		height: 100rpx;
	    border: 1px solid #F7F7F7;
		/* background-color: red; */
		font-size: 14px;
		margin: 10px auto;
	}

	.pay {
		height: 30px;
		margin-top: 10px;
		margin-left: 25px;
		font-size: 14px;
	}

	.vxpay {
		width: 750px;
		height: 92rpx;
		display: flex;
	}

	.vxpay-right image {
		width: 18px;
		height: 42rpx;
		margin: 13px auto;
	}

	.zhifu {
		width: 46rpx;
		height: 46rpx;
		margin-left: 25px;
		margin-top: 11px;
	}

	.box3 {
		width: 750rpx;
		height: 75px;
		background-color: #F7F7F7;
	}

	.foot {
		width: 744rpx;
		height: 120rpx;
		line-height: 120rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-around;
	}
	.foot-left{
		color: red;
		font-size: 20px;
		line-height: 67px;
	}

	.foot-right {
		width: 196rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		color: white;
		font-size: 15px;
		background: linear-gradient(90deg, #FE7D47 0%, #F63737 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin-top: 14px;
	}

	.address {
		width: 642rpx;
		height: 562rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 0 auto;
	}

	.address-title {
		width: 642rpx;
		height: 116rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 34rpx;
		color: #2E2D2D;
		line-height: 116rpx;
		margin: 0 auto;
		text-align: center;
		border-bottom: 2px solid #F7F7F7;
	}

	.close {
		font-size: 30px;
		color: #BDBDC3;
		position: fixed;
		right: 10%;
		top: 28%;
	}

	.lianxi {
		width: 642rpx;
		display: flex;
		justify-content: space-around;
		height: 90rpx;
		border-bottom: 2px solid #F7F7F7;
	}

	.name {
		width: 321rpx;
		line-height: 90rpx;
		border-right: 2px solid #BDBDC3;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		text-align: center;
	}

	.phone {
		width: 321rpx;
		line-height: 90rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: black;
		text-align: center;
	}
	.name input {
		width: 321rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.phone input {
		width: 321rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	.area {
		width: 642rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #F7F7F7;
	}
	.area-left {
		width: 500rpx;
		margin-left: 50px;
		color: #808080;
		font-family: PingFang SC, PingFang SC;
		font-size: 30rpx;
	}
	.area-right image {
		width: 17rpx;
		height: 33rpx;
	}
	.dingwei {
		width: 642rpx;
		height: 126rpx;
	}
	.dingwei-left {
		width: 500rpx;
		margin-left: 50px;
		color: #808080;
		font-family: PingFang SC, PingFang SC;
		font-size: 30rpx;
	}
	.dingwei-left textarea {
		width: 500rpx;
		height: 50px;
		margin-left: 50px;
		color: #808080;
		font-family: PingFang SC, PingFang SC;
		font-size: 30rpx;
	}
	.dingwei-right image {
		width: 17rpx;
		height: 33rpx;
	}
	button {
		width: 592rpx;
		height: 92rpx;
		background: #CCCCCC;
		color: white;
		margin-top: 8px;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>